/**
 * KSAUI v1.0
 * Create：2014-01-23
 * Update：2020-4-24
 */
@ColorList : primary, success, warning, danger, blue , indigo , purple , pink , red , orange , yellow , green , teal , cyan , white , gray , light , black;
@ColorListValue : #4792fb, #5ab32d, #ea981d, #ff6a5b, #4792fb, #727cf5, #6b5eae, #ff679b, #ff5046, #ff9041, #f9bc0d, #5abd48, #14d0ef, #00d4c0, #fff, #9e9e9e, #bec3ca, #474d56;
@ColorListLength : length(@ColorList);

//字体图标名称
@iconfont : remixicon;

@defColor: #4a4a4a; //通用主色
@textColor: #9e9e9e; //浅色文字
@highColor: #4792fb; //高亮主色 突出

@blue: #4792fb;// 蓝色 blue
@indigo: #727cf5;// 靛青色 indigo
@purple: #6b5eae;// 紫色 purple
@pink: #ff679b;// 粉色 pink
@red: #ff5046;// 红 red
@orange: #ff9041;// 橙色 orange
@yellow: #f9bc0d;// 黄色 yellow
@green: #5abd48;// 绿色 green
@teal: #14d0ef;// 天空蓝 teal
@cyan: #00d4c0;// 青色 cyan
@white: #fff;// 白色 white
@gray: #9e9e9e;// 灰色 gray
@light: #bec3ca;// 浅白 light
@black: #474d56;// 暗色 black

//== 定义边框色 ==
@borderColor: #e4e8ec;

//表单高度
@inputHeight : 36px;

//色调支持
@primary : #4792fb; //主色
@success : #5ab32d; //成功
@warning : #ea981d; //警告
@danger : #ff6a5b; //错误/危险


//============== 自定义标签初始化 ==============
ks-list-item,
ks-list,
ks-collapse,
ks-collapse-item,
ks-collapse-title,
ks-collapse-content,
ks-collapse-block,
ks-textarea,
ks-pic,
ks-pic-thumb,
ks-card, ks-card-title, ks-card-content,
ks-content { display: block;}

//============== 全局样式整理 ==============
:root {
	//== 定义颜色 ==
	--defcolor: #4a4a4a; //通用主色
	--textcolor: @textColor; //浅色文字
	--highcolor: #4792fb; //高亮主色 突出
	
	--blue: #4792fb;// 蓝色 blue
	--indigo: #727cf5;// 靛青色 indigo
	--purple: #6b5eae;// 紫色 purple
	--pink: #ff679b;// 粉色 pink
	--red: #ff5046;// 红 red
	--orange: #ff9041;// 橙色 orange
	--yellow: #f9bc0d;// 黄色 yellow
	--green: #5abd48;// 绿色 green
	--teal: #14d0ef;// 天空蓝 teal
	--cyan: #00d4c0;// 青色 cyan
	--white: #fff;// 白色 white
	--gray: @textColor;// 灰色 gray
	--light: #bec3ca;// 浅白 light
	--black: #474d56;// 暗色 black
	//== 定义边框色 ==
	--bordercolor: #e4e8ec;
	
	//色调支持
	--primary : #4792fb; //主色
	--success : #5ab32d; //成功
	--warning : #ea981d; //警告
	--danger : #ff6a5b; //错误/危险
}

* { word-wrap: break-word; margin: 0; padding: 0; box-sizing:border-box; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-tap-highlight-color:rgba(0,0,0,0)}
article, aside, figcaption, figure, footer, header, hgroup, main, nav, section { display: block;}
body, input, button, select, textarea, pre, code {font-family:"Microsoft YaHei","-apple-system","BlinkMacSystemFont","Segoe UI","Roboto","Helvetica Neue","Arial","Noto Sans","sans-serif","Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; font-size:inherit; font-style:inherit; outline:none; color: inherit}
a, .ks-link, .ks-link-line { text-decoration:none; color: #545454;}
a:active, a:hover { outline:none; text-decoration: none;}

img { display:inline-block; vertical-align:middle; border:none}
li { list-style:none}
table { border-collapse:collapse; border-spacing:0}
pre, code { white-space:pre-wrap; word-wrap:break-word; overflow: auto; height: auto}
textarea {overflow: auto;resize: vertical;}
label {white-space: nowrap;}
html { font-size: 100px;}
body { font-size: 14px}

//滚动条整体样式
::-webkit-scrollbar {width: 5px;height: 5px;}
//滚动条里面小方块
::-webkit-scrollbar-thumb {cursor: pointer;border-radius: 5px;background: rgba(0,0,0,.25);-webkit-transition: color .2s ease;transition: color .2s ease}
//滚动条里面轨道
::-webkit-scrollbar-track { background: #ededed; border-radius: 10px;}

//============== 清理浮动 ==============
ks-col:after,
ks-card:after,
ks-card-content:after,
.ks-step:after,
ks-col:after,
ks-layout:after,
ks-alert:after,
.ks-row:after,
.ks-ie9 ks-row[flex]:after,
.ks-ie10 ks-row[flex]:after,
ks-card-title:after,
ks-card-content:after,
ks-content{ content: ' '; clear: both; display: block; width: 100%; height: 0; overflow: hidden}

//============== 自定义新元素 ==============
// 货币
ks-price {
	color: #ff381e; font-size: 1em; font-weight: bold; display: inline-block; white-space: nowrap;
	small { display: inline-block;}
	unit { font-size: .7em; display: inline-block;}
}
// 卡片
ks-card {
	display: block; background: #fff; border-radius: 3px; border:@borderColor 1px solid;
	ks-card-title { font-size: 1.071428em; font-weight: 500; border-bottom: @borderColor 1px solid; padding: 15px 20px;}
}

//============== 主框架 白色背景 ==============
.ks-box { background: #fff; padding: 15px;}
.ks-box:not(:last-of-type) {margin-bottom: 15px;}
.ks-box:after { content: ''; width: 100%; height: 0; overflow: hidden; clear: both;}
.ks-box-title { font-size: 16px; font-weight: bold; padding: 0 15px; margin: 0 -15px 15px;}

//============== 当前位置 ==============
ks-navaction {display: block; margin-bottom: 15px;
	> *:not(ks-btn) { float: left; padding: 0 10px 0 0; margin-right: 10px; position: relative}
	> *:not(ks-btn):after { content: ''; display: inline-block; position: absolute; top: 50%; right: 0; margin-top: -3px; vertical-align: middle; width:6px; height: 6px; border: @textColor 1px solid; border-left: 0; border-bottom: 0; transform: rotate(45deg);}
	> :not(ks-btn):last-child { margin-right: 0}
	> :not(ks-btn):last-child:after { display: none}
}

//============== 浮动提示窗口层 ==============
.ks-body-layer-overflow { overflow: hidden}
.ks-layer {
	position: fixed;  background:#fff; opacity:0; box-shadow: rgba(0,0,0, .28) 0 0 10px; border-radius: 3px;   top: 50%; left: 50%; overflow: hidden;
	&[active] { opacity: 1}
	&[active] + .ks-layer-cover { opacity: 1}
}


//layer title
.ks-layer-title {padding:10px 24px; color: rgba(0,0,0,0.8); font-weight: bold; font-size: 16px; border-bottom: @borderColor 1px solid; background: #fff}

//layer关闭按钮
.ks-layer-close {
	height:40px; line-height: 40px; width:45px; font-size:16px; cursor: pointer; text-align: center; position: absolute; right:0; top: 0;
	&:before {display:block;}
	&:hover {color: @primary;}
}

//layer body
.ks-layer-content { padding:24px; overflow-y: auto;}

//layer底部
.ks-layer-bottom {
	padding:15px; text-align: right; border-top: @borderColor 1px solid;
	ks-btn { margin-right: 10px;}
	ks-btn:last-child { margin-right: 0;}
}
//layer遮罩层
.ks-layer-cover { background:rgba(0,0,0,0.5); opacity:0; width:100%; position: fixed; left:0; top:0; bottom:0; z-index:1; user-select: none}

//iframe框架
.ks-layer-iframe {
	overflow: hidden; background: #fff;
	.ks-layer-content iframe { border: none; width: 100%; height: 100%; overflow: hidden}
	.ks-layer-content { padding:0; overflow: hidden; position: relative}
	.ks-layer-content .ks-loading {color: #fff; border-radius: 0.4em; background: rgba(0,0,0, 0.7); position: absolute; left: 50%; top: 50%; margin: -0.2rem  0 0 -0.65rem;}
}

//从右到左滑出一个全屏（移动端适用）
.ks-layer[pos="00"] { left:100%; top: 0; width: 100%; height: 100%; border-radius: 0}

//自由定位的layer样式调整 一般用于下拉选择
.ks-layer[pos="0"] {
	border: #e4eaf2 1px solid; box-shadow: 0 5px 5px 0 rgba(154,161,171,.17); position: absolute; min-width: 120px;
	.ks-layer-content { padding: 0;}
	.ks-layer-title { background: #f2f2f2;}
}

//表单框
.ks-Dialog_form{
	.ks-layer-content { min-width: 400px;  padding:24px 40px;}
}

//toast 提示框
.ks-Dialog_toast{
	background:rgba(0,0,0,0.8); color: #eee; padding:15px 25px; text-align: center; box-shadow: none;
	.ks-layer-close { display: none;}
	.ks-layer-cover { opacity: 0.3; background: #fff;}
	.ks-layer-content {padding: 0; overflow: hidden;
		[icon]:before {font-size:26px; margin-right: 10px; vertical-align: middle}
	}
}


//确认框
.ks-Dialog_confirm {
	.ks-layer-title { padding: 0.2rem 0 0 0.4rem; font-size: 16px; border: 0}
	.ks-layer-title:before {font-family:@iconfont; content: '\ee59'; color: @primary; font-size: 0.24rem; vertical-align: middle;}
	.ks-layer-content {font-size: 16px; padding:0.1rem 0.4rem 0.4rem 0.7rem; min-width: 3.4rem}
	.ks-layer-bottom { border-top: 0; padding: 0 0.4rem 0.2rem;}
}

//操作成功、失败
.ks-Dialog_success .ks-layer-content,
.ks-Dialog_error .ks-layer-content {padding: 40px 30px 30px 100px; width: auto; position: relative; font-size: 16px;}

.ks-Dialog_success .ks-layer-bottom,
.ks-Dialog_error .ks-layer-bottom { border-top: 0; padding: 0 30px 30px;}

.ks-Dialog_success .ks-layer-content::before,
.ks-Dialog_error .ks-layer-content::before {font-size: 30px; position: absolute; left: 50px; top: 34px}

.ks-Dialog_success .ks-layer-content::before {font-family:@iconfont; content: '\eb80'; color: #18bc4a;}
.ks-Dialog_error .ks-layer-content::before {font-family:@iconfont; content: '\ee58'; color: #ff6161;}
.ks-Dialog_html .ks-layer-content { max-width: 680px;}

//确认输入框
.ks-Dialog_prompt {
	.ks-layer-title { border: 0; padding-top: 20px; padding-bottom: 0 }
	.ks-layer-content textarea { padding:5px 0; overflow: hidden; border: 0; border-bottom: #f2f2f2 1px solid; height: 1.8em; line-height: 1.8em; border-radius: 0; resize: none;}
	.ks-layer-content textarea:focus {border-bottom-color: @blue}
	.ks-layer-bottom { border: 0}
}

//新建页面层
.ks-layer.openWindow > .ks-layer-content { padding: 0; position: relative;}
.ks-layer.openWindow > .ks-layer-title { padding: 0; height: 45px; line-height:45px; }

//弹出的下拉菜单
.ks-layer-showmenu[pos='0'] > .ks-layer-content{
	padding: 5px 0;
	> * {
		display: block; padding: 7px 15px; cursor: pointer;
		&:hover { background: #f8f8f8;}
		&:before {margin-right: 5px;}
	}
}

//下拉选择
.ks-layer-select {
	border-top-left-radius: 0 !important; border-top-right-radius: 0 !important;
	.ks-layer-content { max-height: 18em;}
}

.layer-loading {
	text-align: center; padding-top: 120px; color: @textColor;
	[icon='loading'] { font-size: 40px; display: block;}
}

//浮动层
.ks-area-layer[pos='0'] { min-width: 220px; height: 320px;
	.ks-layer-content {position: relative; padding: 0}
	.ks-layer-content { overflow: hidden}
	.ks-area-layer-btn { border-bottom:#dfdfdf 1px solid; padding:5px 10px; background: #f2f2f2;
		p { height: 30px; line-height:30px; display: none; cursor: pointer}
		p:first-of-type { display: block}
		p.a { color: @primary}
		p:hover { color: #e60000}
		p:before { content: ''; width: 6px; height:6px; display: inline-block; border-radius: 100%; background: @primary; vertical-align: middle; margin-right:10px;}
	}
	
	.ks-area-layer-tit { color: @textColor; text-align: center; border-bottom: #dedede 1px solid; padding-bottom:10px}
	.ks-area-layer-c {
		overflow-y:auto;
		> ks-list > ks-list-item { padding-left: 10px; padding-right: 10px}
	}
}

//============== 图片查看器 ==============
.ks-viewer {
	user-select: none; background: rgba(0,0,0, .8);
	.ks-layer-title { background: none; border-color: rgba(255,255,255, .2); color: #fff;}
	.ks-layer-close { background: #333; color: #fff;}
	.ks-viewer-content {
		width: 100%; height: 100%; flex: 1; overflow: hidden; position: relative; justify-content: center; align-items: center; display: flex;
		&> div {cursor: grab; transform:translate(0, 0) scale(1);}
		/*对比模式下*/
		&[comparison] .ks-viewer-comparison-img {opacity: 0;}
	}
}
/*对比元素*/
.ks-viewer-comparison-img {position: absolute; left: 0; top: 0; z-index: 2; opacity: 0}
.ks-viewer-comparison-dom {
	position: absolute; left: 0; top: 0; z-index: 3; width: 50%; height: 100%; overflow: hidden;
	img { position: absolute; left: 0; top: 0;}
}

.ks-viewer-comparison-btn {
	width: 3px; height: 100%; background:#fff; position: absolute; left: 50%; top: 0; z-index: 4; cursor: e-resize;
	&:after {
		content: ''; display: block; width: 20px; height: 20px; border-radius: 100px; overflow: hidden; background: #fff; top: 50%; left: -10px; position: absolute; cursor: e-resize
	}
}


//============== 警告提示框 ==============
.ks-alert { padding: 15px 20px; background: #fff6da; border: #ffeaba 1px solid; color: #d07d00; border-radius: 3px;}

//============== 浮动提示标 ==============
.ks-ftip {position:absolute; left:0; top:0; z-index:500; background:#333; color:#fff; padding:5px 10px; font-size:12px; border-radius:3px; }
.ks-ftip-x {width:0; height:0; border:#333 5px solid; border-bottom-color:transparent; border-left-color:transparent; border-right-color:transparent; position:absolute; bottom:-10px; left:10px; }

//============== 提醒框 ==============
ks-alert {
	display: block; background:#f2f2f2; border:#e4e8ec 1px solid; color:#787878; padding:10px 15px; border-radius: 3px; position: relative; transition:all 0.1s ease-in-out;
	&[icon] { padding-left: 35px;}
	&[icon]:before { content: '\ee58'; font-size: 20px; position: absolute; left: 10px; top: 9px; z-index: 1;}
	&[type="success"] {
		background: #f6ffed; border-color:#b7eb8f; color:@success;
		&[icon]:before { content: '\eb80';}
	}
	&[type="info"] {background: #ecf5ff; border-color:#b2d8ff; color:@primary;
		&[icon]:before { content: '\ee58';}
	}
	&[type="error"] {background: #fff2f0; border-color:#ffccc7; color:@danger;
		&[icon]:before { content: '\eb96';}
	}
	ks-alert-close { position: absolute; right: 10px; top: 10px; z-index: 9; cursor: pointer; font-size: 12px;}
	ks-alert-title { display: block; width: 100%; margin-bottom: 5px; font-weight: 600;}
}
//============== TAB选项卡 ==============
ks-tab,
ks-tab-title,
ks-tab-content,
ks-tab-item,
ks-tab-touch-content {display: block; width: 100%; height: auto;}
ks-tab-touch-content {overflow: hidden}

ks-tab {
	display: block;
	
	ks-tab-content {transition:all 0.1s ease-in-out;}
	
	ks-tab-title {
		width: 100%; height: 40px; line-height: 40px; position: relative;
		
		ks-tab-title-item {
			float: left; padding: 0 10px; min-width: 60px; user-select: none; text-align: center;  margin-right: 10px; cursor: pointer; position: relative;
			&[active], &[active] a { color: #495057}
			&:last-of-type { margin-right: 0}
			&[active]:after {
				content:''; height: 4px; width:0; position: absolute; left:50%; bottom: 0; background: @primary; border-radius: 4px; transition: all 0.3s; margin:0 0 0 -20px; z-index: 10;
			}
			&[active]:after {
				width:40px;
			}
		}
	}
	
	&[touch] > ks-tab-touch-content > ks-tab-content > ks-tab-item{
		float: left; display: block; height: 100%; min-height: 10px;
	}
}

//============== 分页样式处理 ==============
ks-page {
	text-align:center;background: #fff; box-shadow: #eee 0 0 3px; font-size: 1em; padding-left: 1px; width: auto; height: 2.285em; margin: 0 auto; display: inline-block;
	> a { color: #757575 !important;}
	*:before { vertical-align: unset}
	> * { float: left; color: @textColor; height:2.285em; line-height:2.285em; padding:0 .9em; border:@borderColor 1px solid;background: none; user-select: none; cursor: pointer; margin-left: -1px;}
	> *:first-child { border-radius: .22em 0 0 .22em;}
	> *:last-child { border-radius: 0 .22em .22em 0;}
	> *:hover { background: #fafafa}
	> *[active] { background:@primary; color:#fff !important; border-color: @primary; font-weight:bold;}
	> *[disabled] { cursor: not-allowed; color: #bbb; background: #fff}
	[icon='arrow_right']:before, [icon='last_page']:before { float: right; margin-right: 0;}
	//快速跳转
	ks-input-group { font-size: 1em; width: auto; padding: 0; color: @textColor; height: 2.285em; border: 0}
	ks-input-group > * { height: 2.285em !important; line-height: 2.285em !important; font-size: 1em;}
	ks-input-group > input { width: 3.571em; padding: 0 .357em; text-align: center}
	ks-input-group ks-btn { background: @gray;}
	ks-page-btn[disabled] { cursor: not-allowed; background: #f2f2f2}
	&[disabled] {
		opacity: .5; background: #f2f2f2;
		> * {cursor: not-allowed;}
	}
	&[size="small"] { font-size: 12px;}
}

//============== 列表样式 ==============

//普通列表
ks-list {
	width: 100%; height: auto; overflow: hidden;
	> * { display: block; padding: .71428em 0; position: relative; height: auto; overflow: hidden; list-style:none;}
	> *:after {position: absolute; right: 0; bottom: 0; left:0; height: 1px; content: ''; background-color: @borderColor;}
	> *:not(.ks-fl):last-of-type:after {display: none;}
	> * > small { float: right; color: #898989;}
}

//折叠面板
ks-collapse {
	> * {
		> ks-collapse-title {height: auto; cursor: pointer; outline: none; padding:6px 0;}
		> ks-collapse-content {transition:all 0.1s ease-in-out; height: 0; overflow: hidden;}
		> ks-collapse-title:not([icon])::before {content: '\ea6d'; float: left; margin:.15em .4em; font-family: @iconfont; font-size: 1em; line-height: 1.2em; transition:all 0.3s ease-in-out;}
		> ks-collapse-content { opacity: 0; transition:all 0.3s ease-in-out;}
		&[active] > ks-collapse-title:not([icon])::before {transform: rotate(90deg);}
		&[active] > ks-collapse-content { opacity: 1}
	}
}



//圆点列表
.ks-list-dot {
	> ks-list-item { padding: 0; height: 30px; line-height: 30px;}
	> ks-list-item:before { content: ''; vertical-align: middle; display: inline-block; width: 5px; height: 5px; margin-top: -2px; border-radius:100%; background: #ccc; margin-right: 5px}
	> ks-list-item:after { display: none}
}


//数字列表
.ks-list-number {
	counter-reset: kslistnumber;
	> ks-list-item { padding: 0; height: 30px; line-height: 30px;}
	> ks-list-item:before { counter-incNaNpxent: kslistnumber; content: counters(kslistnumber,''); display: inline-block; line-height: 18px; padding: 0 5px; margin-right: 3px; border-radius: 2px; background: #bdbdbd; color: #fff; font-size: 12px;}
	> ks-list-item:nth-of-type(1):before,
	> ks-list-item:nth-of-type(2):before,
	> ks-list-item:nth-of-type(3):before {background: #fd4c08;}
	> ks-list-item:after { display: none}
}


//带右箭头
ks-list > ks-list-item[icon*='arrow_right'], .ks-list-arrow > ks-list-item { padding-right:2em;}
ks-list > ks-list-item[icon*='arrow_right']:before,
.ks-list-arrow > ks-list-item:before {color:#777; top: 50%; font-size: 1em; width: 1.2em; height: 1.2em; line-height: 1.2em; transform: translateY(-50%); text-align: center; font-family: @iconfont; position: absolute; right: 0;}
.ks-list-arrow > ks-list-item:before { content: '\ea6e'; }

//左侧图标 设置类
.ks-list-icon {
	> ks-list-item { padding-left: 39px; line-height: 34px;}
	> ks-list-item > [icon]:first-of-type {width: 34px; height: 34px; text-align: center; line-height: 34px; border-radius: 100%; font-size: 24px; float: left; margin-left: -39px;}
	> ks-list-item::after { left: 39px;}
}

//单选列表
.ks-list-select {
	width: 100%; overflow-y: auto;
	> ks-list-item {cursor:pointer; white-space: nowrap; display: block}
	> ks-list-item:not(.ks-select-optgroup-title):hover {opacity: .7}
	> ks-list-item:before {font-size: 20px; width:20px; height:20px; text-align: center; font-family: @iconfont; color: #acacac; margin:0 5px 0 0;}
	> ks-list-item[selected] {color:@primary;}
	> ks-list-item:not([icon])[selected]:before {content: '\eb7b';}
	> ks-list-item[selected]:before {float: right; color:@primary}
	> ks-list-item[disabled] {color:#ddd; cursor:not-allowed; background: none}//被禁用的选项
	//分组名
	> ks-list-item.ks-select-optgroup-title {cursor: default; padding-right: 0 !important;}
	> ks-list-item.ks-select-optgroup-title:before { display: none}
	> ks-list-item.ks-select-optgroup-title > strong { display: block}
	
	//多选列表
	&[multiple] > ks-list-item:not([icon]):before { content: '\eb7f';}
	&[multiple] > ks-list-item:before { float: left;}
	&[multiple] > ks-list-item:not([icon])[selected]:before { content: '\eb85'}
}

//layer层处理
.ks-layer-select .ks-list-select > ks-list-item { padding-right: .57em; padding-left: .57em;}

//混排基础元素
.ks-media {font-size: 14px; width: 100%; height: auto; overflow: hidden;}
.ks-media > * { margin-bottom: 12px; display: block;}
//最后一个去掉下边距
.ks-media > *:last-child { margin-bottom:0 }

.ks-media-img {width: 80px; height:auto; overflow: hidden; text-align: center;}
.ks-media-img > img {max-width: 100%;}
.ks-tc > .ks-media-img {  display: inline-block;}
//如果图片存在全圆角时，宽高必须相同
.ks-media-img.ks-o { height: 80px}

//浮动图片样式
.ks-media-img:not(.ks-fl):not(.ks-fr) {width: 100%}
.ks-media-img.ks-fl, .ks-media-img.ks-fr { margin-bottom: 0; flex:0 0 auto}
.ks-media-img.ks-fl { margin-right: 10px;}
.ks-media-img.ks-fr {margin-left: 10px;}


//图片右浮动时 内容区宽度的处理
.ks-media-img.ks-fl + *, .ks-media-img.ks-fr + * {overflow: hidden;}

//标题
.ks-media-title { font-size: 1.148em; font-weight: 600}
.ks-media-title, .ks-media-title a { color:@defColor}
.ks-media-title * { font-weight: normal;}//标题子级去掉加粗
//内容摘要行 summary
.ks-media-text { color: @textColor}




//============== 头像尺寸 ==============
ks-avatar {
	position: relative; text-align: center; display: inline-block; background: #ccc; color: #fff; width: 64px; height: 64px; line-height:64px; overflow: hidden; white-space: nowrap;  border-radius:100em; vertical-align: middle; word-break:break-all; font-size: 16px;
	&[isstr] {border: #f2f2f2 1px solid;}
	> img {width: 100%; height: auto;}
	> i[icon] { font-size: 28px;}
	
	&[size="small"] {
		width: 40px; height:40px; line-height:40px; font-size: 13px;
		> i[icon] { font-size: 24px;}
	}
	&[size="mini"] {
		width: 24px; height: 24px; line-height:24px; font-size: 12px;
		> i[icon] { font-size: 18px;}
	}
	&[square] { border-radius: 3px;}
}


//============== 轮播 ==============
.ks-slide {
	width: 100%; position: relative; height:auto;
	.ks-slide-c { width: 100%; transition:all 0.6s ease-in-out; height: auto; display: flex; flex-flow: row;}
	.ks-slide-c._a { transition: none}
	.ks-slide-item {width: auto; height: 100%; z-index: 1; transition: all .6s ease-in-out; flex-shrink:0}
	
	//左右控制器
	.ks-slide-control-prev, .ks-slide-control-next { position: absolute; top: 50%; z-index: 99; cursor: pointer; width: 36px; height: 36px; line-height: 36px; text-align: center; border-radius: 100%; margin-top: -18px; background: #000; transition: all .3s ease-in-out; opacity: 0; display: inline-block; color: #fff;}
	.ks-slide-control-prev { left:0;}
	.ks-slide-control-next { right:0;}
	
	&:hover .ks-slide-control-prev { opacity: .3; left: 15px;}
	&:hover .ks-slide-control-next { opacity: .3; right: 15px;}
	
	.ks-slide-item._moveon { z-index: 10;}
	
	.ks-slide-item._hide { opacity: 0; z-index: 0}
	.ks-slide-item._up { z-index: 20}
	.ks-slide-item._on { z-index: 90}
	
	//状态显示
	.ks-slide-status { position: absolute; left: 0; bottom: 1em; text-align: center; width: 100%; z-index: 99}
	.ks-slide-status > * { width: 30px; padding: 2px 0; background: rgba(0,0,0,.2); color: #fff; font-size: 0.8571em; display: inline-block; cursor: pointer; margin: 0 2px;}
	.ks-slide-status > .a { background: rgba(255,255,255,.8); color: inherit;}
}
//============== ks框架 H5 ==============
ks {
	display: flex; width: 100%; height: 100%; overflow: hidden; position: relative; flex-direction:column;
	> ks-side {width: 220px; flex:0 0 auto}
	> ks-content {
		flex: 1; flex-basis: auto; overflow: hidden; overflow-y:auto; width: 100%; height: 100%;
		ks-navbar-content {
			display: block;  width: 100%; height: 100%; overflow: auto;
			&[active] { display: block;}
		}
	}
	> ks-footer, > ks-header { flex:0 0 auto;}
	&[navbar] {padding-bottom: 1.1rem; display: block; height: auto}
}

ks-navbar {
	height: 1.1rem; width: 100%; position: fixed; bottom: 0; left: 0; right: 0; display: flex; background: #fff; z-index: 900;
	&:before { content: ''; position: absolute; left: 0; top: 0; width: 200%; height: 1px; background: #ddd; transform: scale(.5) translateX(-50%);}
	
	> ks-navbar-item {
		padding-top:0.3rem; text-align: center; flex: 1; position: relative; cursor: pointer; font-size: 0.24rem;
		//获得焦点
		&[active] { color: @primary;}
		//带图标的处理
		&[icon]:before { display: block; width:100%; height: 0.54rem; line-height: 0.54rem; font-size: 0.46rem; text-align: center; margin:-0.2rem 0 0 0 !important;}
		//消息处理 默认圆点
		&[news]:after { content: '';  background: #ff381e; width:0.12rem; height: 0.12rem; position: absolute; left: 50%; top: 1px; border-radius: 0.2rem; margin: 0.06rem 0 0 0.15rem; transform: scale(.8);}
		//消息处理 属性值第一位包含数字1-9
		&[news^="1"]:after, &[news^="2"]:after, &[news^="3"]:after, &[news^="4"]:after,
		&[news^="5"]:after, &[news^="6"]:after, &[news^="7"]:after, &[news^="8"]:after, &[news^="9"]:after {
			content: ""attr(news)""; width:auto; height:auto; padding:0.02rem 0.06rem; font-size: 0.12rem; font-weight: bold; color: #fff; border:#fff 0.02rem solid; margin: 0 0 0 0.05rem;
		}
	}
}

//============== 日历 浮动层 ==============
.ks-calendar {
	font-size: 14px; width: 320px; padding: 0 15px 15px;
	* {transition:all 0.3s; user-select: none;}
	i, em { font-style: normal}
	.ks-calendar-t {
		width: 100%; text-align: center; position: relative; height: 50px; line-height: 50px; color: #333; font-size: 16px;
		> i { display: block; font-size: 20px; text-align: center; position: absolute; top: 0; cursor: pointer}
		> i:nth-child(1) {left:15px}
		> i:nth-child(2) {left:45px;}
		> i:nth-of-type(3){ right: 45px;}
		> i:nth-of-type(4) { right: 15px;}
	}
	
	.ks-calendar-ul {
		width:100%; height: auto; overflow: hidden;
		em { font-weight: bold;}
		i ,em { float: left; width:14.28%; height: 36px; line-height: 36px; text-align: center;}
		i { cursor: pointer; border-radius: 3px;}
		i._ { color: #aaa}
		i:hover { color: #333; background:#f2f2f2}
		i.a { color: #fff; background:@primary}
	}
	
	
	.ks-calendar-b {
		width: 100%; padding:15px 15px 0; height: auto;
		ks-btn { float: right; margin-top: 20px;}
		.ks-calendar-time { float: left;}
	}
	
	.ks-calendar-time {
		padding:15px 0;
		> div {width: 40px; height: 40px; line-height: 40px; position: relative; float: left; border: none; text-align: center;}
		> div [data-digit] {border: none; position: absolute; left: 0; top: -20px; z-index: 1; width: 100%; height: 20px; line-height: 20px; cursor: pointer}
		> div [data-digit='down'] { bottom: -20px; top: inherit}
	}
	
	.ks-calendar-time {
		> div { font-size: 1.2em; font-weight: bold}
		div input { width:40px; height:40px; line-height: 40px; padding: 0; text-align: center; background:none; font-size: 1.2em; border: none;}
		[data-digit] { display: block; opacity: .3;}
		.ks-input-arrow:hover [data-digit] {opacity:1}
		input::-webkit-outer-spin-button,
		input::-webkit-inner-spin-button {-webkit-appearance: none;appearance: none;margin: 0;}
	}
	
}

//============== 星星评分显示组件 ==============
ks-star {
	color: #FFA101;
	&[value='0'] > *,
	> [active] ~ * { color: #ccc;}
}
//============== 暂无数据 ==============
ks-empty { display: block; padding: 30px 0; text-align: center; color: #cacaca}
ks-empty:before { content: '\ecec'; font-size:3em; font-family: @iconfont; display: block;}

//============== 表格框(table.js必须) ==============
.ks-table {
	width: 100%; background: #fff; display: table; empty-cells: show; border-collapse: collapse; text-align: left; font-size: 14px; line-height: 1.5715; position: relative; z-index: 1;
	th { font-weight: bold; color: rgba(0,0,0,.75);}
	th, td { padding: 14px; min-width: 51px; overflow-wrap:break-word; border-bottom: #f0f0f0 1px solid}
	
	//模式 左标题右内容
	tr > th:only-of-type { width: 100px;}
	tr > th:only-of-type ~ td:only-of-type { width:auto;}
	
	//鼠标经过加背景色
	&[hover] tbody tr:hover { background: #fafafa;}
	
	//thead增加背景色
	> thead ,
	> tbody:first-child > tr:first-child,
	&[data-style*='hover'] tr:hover {background:#fafafa;}
	
	//属性存在 striped = 隔行换色
	&[striped] tbody > tr:nth-of-type(even) { background: #fcfcfc}
	//line线条属性
	&[border] td, &[border] th {border: #f0f0f0 1px solid}
	//最后一行去掉底部边框
	&:not([border]) > *:last-child tr:last-child th, &:not([border]) > *:last-child tr:last-child td { border-bottom: 0}
	//行被选中
	tbody tr.ks-table-tr-checked { background: #e6f7ff !important;}
	tbody tr.ks-table-tr-checked td , tbody tr.ks-table-tr-checked {border-color: #d8e9f1}
	
	//table后跟随的分页
	& ~ page { margin-top: 20px}
}

.ks-table-toolbar {margin-bottom: 10px; width: 100%; height: auto; overflow: hidden}

//自适应处理 table可能过长 或 屏幕过窄
.ks-table-auto {width: 100%; overflow-x:auto; }

.ks-table-header > table,
.ks-table-body > table { table-layout: fixed;}
.ks-table-body { margin-top: -1px;}
.ks-table-header tr > th:last-of-type { border-right: 0}
.ks-table-header .ks-td-scroll { padding: 0; border-left: 0;}//页头占位滚动条



//============== 表单结构 ==============

//处理表单布局
ks-form {
	display: block;
	ks-form-item {margin-bottom: 25px; display: block;}
	> :last-child { margin-bottom: 0}
	ks-form-label { float: left; width: 125px; height: @inputHeight; line-height: @inputHeight;}
	
	ks-form-content {min-height: @inputHeight; width: 100%; display: block; line-height: @inputHeight;}
	ks-form-content:before {}
	ks-form-extra { min-height: 24px; line-height: 24px; font-size: 14px; color: rgba(0,0,0,.4)}
	
	ks-form-label + ks-form-content,
	ks-form-label ~ ks-form-extra {display: block; float: right; width: calc(100% - 125px);}
	
	
	ks-form-group {
		display: table; width: 100%;
		> *  { display: table-cell; width:auto; padding: 0 10px;}
		> :first-child { padding-left: 0;}
		> :last-child { padding-right: 0;}
	}
	//搜索框模式
	&[search] {
		position: relative; padding-bottom: @inputHeight; height: auto; overflow: hidden; display: block;
		ks-form-label {min-width: 100px; text-align: right}
		> * { float: left; width: 33.333333%; margin:0 0 10px 0; }
		ks-form-btn { position: absolute; right: 0; bottom: 0; width: auto; margin: 0}
		ks-form-content > .ks-select { width: 100%}
	}
}

html[device=pc] {
	ks-form {
		ks-form-label {
			text-align: right; padding-right: 12px;
		}
	}
}

//垂直结构
ks-form[top] {
	ks-form-label, ks-form-content, ks-form-extra { float: none; width: 100%; text-align: left;}
	ks-form-label:after { content: '';}
}
ks-form[inline] {
	display: inline-block;
	> * {margin-bottom: 0; display: inline-block; vertical-align: top;}
	ks-form-label, ks-form-content, ks-form-extra { float: none; width:auto; text-align: left; display: inline-block; vertical-align: top;}
}

ks-form[size='small']{
	font-size: 12px;
	ks-form-item {margin-bottom: 10px;}
	ks-input-group > *:not([class*='ks-']) { padding: 0 5px;}
	ks-form-label { height: 28px; line-height: 28px;}
	ks-form-content { line-height: 25px; min-height: auto}
	&[search] { padding-bottom: 28px;}
}

//普通行
.ks-row {display: block;}

.ks-row-arrow:after { content: ''; display: block; width: 100%; clear: both; overflow: hidden;}
//限制行 只有一行文字 固定高度 超出裁切 相对定位
.ks-row-x { width: 100%; height: 1.71428em; line-height: 1.71428em; position:relative; overflow: hidden;}

//普通行 带右箭头
.ks-row-arrow { position: relative; padding-right: 1.4em;}
.ks-row-arrow:before { font-family: @iconfont; content: '\ea6e'; height: 1.2em; line-height: 1.2em; position: absolute; top: 50%; right: 0; margin-top: -0.6em;}

ks-row {
	display: block;
	&[flex] {display:flex; flex-wrap: wrap; align-items:stretch;}
	&[spacing='1'] { margin:-2.5px}
	&[spacing='2'] { margin:-5px}
	&[spacing='3'] { margin:-10px}
	&[spacing='4'] { margin:-15px}
	&[spacing='5'] { margin:-20px}
	&[spacing='6'] { margin:-25px}
	
	&[spacing='1'] > ks-col { padding:2.5px}
	&[spacing='2'] > ks-col { padding:5px}
	&[spacing='3'] > ks-col { padding:10px}
	&[spacing='4'] > ks-col { padding:15px}
	&[spacing='5'] > ks-col { padding:20px}
	&[spacing='6'] > ks-col { padding:25px}
	//内容垂直居中 -4px未考虑多场景下
	&[middle] > ks-col:before {height: 100%; display: inline-block; content: ''; vertical-align: middle; margin-left: -5px;}
}

ks-col {
	flex:1 0 auto;
	&[span] {flex: 0 0 auto}
	&[span='1'] {width:8.33333%;}
	&[span='2'] {width:16.66667%;}
	&[span='3'] {width:25%;}
	&[span='4'] {width:33.33333%;}
	&[span='5'] {width:41.66667%;}
	&[span='6'] {width:50%; }
	&[span='7'] {width:58.33333%;}
	&[span='8'] {width:66.66667%;}
	&[span='9'] {width:75%;}
	&[span='10'] {width:83.33333%;}
	&[span='11'] {width:91.66667%;}
	&[span='12'] {width:100%;}
}

.ks-ie9, .ks-ie10 {
	ks-row[flex] { display: block;}
	ks-col { float: left; display: block}
}

//栅格 平板
@media only screen and (min-width: 576px){
	ks-col {
		&[sm='1']	{width:8.33333%;}
		&[sm='2']	{width:16.66667%;}
		&[sm='3']	{width:25%;}
		&[sm='4']	{width:33.33333%;}
		&[sm='5']	{width:41.66667%;}
		&[sm='6']	{width:50%; }
		&[sm='7']	{width:58.33333%;}
		&[sm='8']	{width:66.66667%;}
		&[sm='9']	{width:75%;}
		&[sm='10']	{width:83.33333%;}
		&[sm='11']	{width:91.66667%;}
		&[sm='12']	{width:100%;}
	}
	
}
//栅格 PC
@media only screen and (min-width: 992px){
	ks-col {
		&[pc='1']	{width:8.33333%;}
		&[pc='2']	{width:16.66667%;}
		&[pc='3']	{width:25%;}
		&[pc='4']	{width:33.33333%;}
		&[pc='5']	{width:41.66667%;}
		&[pc='6']	{width:50%; }
		&[pc='7']	{width:58.33333%;}
		&[pc='8']	{width:66.66667%;}
		&[pc='9']	{width:75%;}
		&[pc='10']	{width:83.33333%;}
		&[pc='11']	{width:91.66667%;}
		&[pc='12']	{width:100%;}
	}
	
}
//栅格 高分屏
@media only screen and (min-width: 1900px){
	ks-col {
		&[hd='1']	{width:8.33333%;}
		&[hd='2']	{width:16.66667%;}
		&[hd='3']	{width:25%;}
		&[hd='4']	{width:33.33333%;}
		&[hd='5']	{width:41.66667%;}
		&[hd='6']	{width:50%; }
		&[hd='7']	{width:58.33333%;}
		&[hd='8']	{width:66.66667%;}
		&[hd='9']	{width:75%;}
		&[hd='10']	{width:83.33333%;}
		&[hd='11']	{width:91.66667%;}
		&[hd='12']	{width:100%;}
	}
	
}

th.ks-label { width: 100px; padding: 10px;}


//============== 表单 按钮 ==============
ks-btn {
	transition:all 0.1s ease-in-out; cursor:pointer; display:inline-block;  text-align:center; vertical-align:middle; white-space:nowrap; margin:0; user-select: none; font-style: normal; height: @inputHeight; line-height:(@inputHeight - 2); font-size:14px; background:#fff; color: #63666b; padding:0 15px; border-radius:4px; opacity: .95; border: @borderColor 1px solid; overflow: hidden; position: relative;
	
	
	&:active { opacity: 1;}
	//获得焦点
	&:hover { border-color: @primary; color:@primary; z-index: 10;}
	//被禁用
	&[disabled] { cursor: not-allowed; opacity: 0.5; pointer-events: none;}
	
	//整行
	&[block] { width: 100%;}
	
	//按钮图标统一增加右边距
	&[icon]:before:not(:only-child) { margin-right: 2px;}
	
	//按钮存在上传表单的处理 icon=upload
	&[icon='upload'] {
		position: relative;
		input[type='file'] { position: absolute; left: 0; top: 0; z-index: 1; opacity: 0; height: 100%; width:100%}
	}
	
	//颜色支持
	&:not([line]){
		&[color] {color: #fff; border:0;}
		.loop(@i) when (@i =< @ColorListLength) {
			@Cname : extract(@ColorList, @i);
			@Cval : extract(@ColorListValue, @i);
			&[color='@{Cname}'] { background: @Cval; border-color: @Cval}
			.loop(@i+1);
		}
		.loop(1);
	}
	
	&[line]{
		.loop(@i) when (@i =< @ColorListLength) {
			@Cname : extract(@ColorList, @i);
			@Cval : extract(@ColorListValue, @i);
			&[color='@{Cname}'] { color:@Cval; border-color: average(@Cval,#fff); background: average(average(average(average(@Cval, #fff) , #fff) , #fff),#fff);}
			.loop(@i+1);
		}
		.loop(1);
	}
	
}




//按钮尺寸
ks-btn[size='mini'] {
	height: 22px; line-height: 20px; padding:0 5px; font-size: 12px;
	&[icon='loading']::before {width: 8px; height: 8px;}
}

ks-btn[size='small'], ks-form[size='small'] ks-btn {
	height: 28px; line-height: 26px; padding:0 10px; font-size: 12px;
	&[icon='loading']::before {width: 10px; height: 10px;}
}




//胶囊
ks-btn[cap], ks-btn-group[cap] > ks-btn {border-radius:10em;}
//胶囊 纯图标
ks-btn[cap]:empty, ks-btn-group[cap] > ks-btn:empty { padding: 0; text-align: center; min-width: @inputHeight;}


//按钮组处理
ks-btn-group {
	display: inline-block; vertical-align: middle;
	&:after { content: ''; display: block; clear: both; width: 100%; overflow: hidden}
	> ks-btn { float: left}
	> ks-btn:not(:first-child) { margin-left: -1px}
	//不是最后一个和第一个
	> ks-btn:not(:last-child):not(:first-child) { border-radius: 0 !important;}
	//第一个
	> ks-btn:first-child:not(:only-child) { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important;}
	//最后一个
	> ks-btn:last-child:not(:only-child) { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
	
	
	//颜色支持
	&:not([line]) {
		&[color] > ks-btn {color: #fff; border:0;}
		.loop(@i) when (@i =< @ColorListLength) {
			@Cname : extract(@ColorList, @i);
			@Cval : extract(@ColorListValue, @i);
			&[color='@{Cname}'] > ks-btn { background: @Cval; border-color: @Cval}
			.loop(@i+1);
		}
		.loop(1);
	}
	
	&[line] {
		.loop(@i) when (@i =< @ColorListLength) {
			@Cname : extract(@ColorList, @i);
			@Cval : extract(@ColorListValue, @i);
			&[color='@{Cname}'] > ks-btn { color:@Cval; border-color: average(@Cval,#fff); background: average(average(average(average(@Cval, #fff) , #fff) , #fff),#fff);}
			.loop(@i+1);
		}
		.loop(1);
	}
}

//============== ks-tag标记 ==============
ks-tag {
	display:inline-block; white-space:nowrap; padding:2px 5px ; font-size: 14px; border-radius:3px; vertical-align: middle; background: #ecf5ff; color: @primary; position: relative;
	&[close] {padding:0 18px 0 5px ;}
	&[cap] { border-radius: 1em;}//圆角
	&:not([line]) {
		.loop(@i) when (@i =< @ColorListLength) {
			@Cname : extract(@ColorList, @i);
			@Cval : extract(@ColorListValue, @i);
			&[color='@{Cname}'] { background: @Cval; color:#fff;}
			.loop(@i+1);
		}
		.loop(1);
		&[color='white'] { color: @textColor; border: #f2f2f2 1px solid}
	}
	&[line] {
		border: @borderColor 1px solid; color: inherit; background: none;
		.loop(@i) when (@i =< @ColorListLength) {
			@Cname : extract(@ColorList, @i);
			@Cval : extract(@ColorListValue, @i);
			&[color='@{Cname}'] { color:@Cval; border-color: average(@Cval,#fff); background: average(average(average(average(@Cval, #fff) , #fff) , #fff),#fff);}
			.loop(@i+1);
		}
		.loop(1);
	}
	> i[icon="close"] {font-size: 12px; display: inline-block; width: 12px; height: 12px; text-align: center; line-height: 14px; cursor: pointer; opacity: .7; position: absolute; right: 8px; top:50%; margin-top: -6px}
	> i[icon="close"]:before {float: left;}
	> i[icon="close"]:hover { opacity: 1}
	
	&[edit] { cursor: pointer}
	> input[type="text"] { position: absolute; left: 0; top: 0; border: none; background: none; width: 100%; height: 100%; padding:0 .4em;}
}




//============== 输入框、日期框、select ==============

//去掉number默认箭头
input[type='number']::-webkit-outer-spin-button,
input[type='number']::-webkit-inner-spin-button {-webkit-appearance: none;appearance: none;margin: 0;}

//默认边框 背景色
input.ks-input, textarea.ks-input, .ks-input input, .ks-textarea textarea, ks-input-group > input,
.ks-select, .ks-date, ks-area {vertical-align: middle;  text-align:inherit; display: inline-block; border: @borderColor 1px solid; border-radius:3px; background: #fff;}



//蛋疼的placeholder
.ks-input::placeholder, ks-input-group input::placeholder, ks-input-group textarea::placeholder {color: #ccc;}

//默认宽度100%
ks-input-group,
.ks-input,
ks-area,
.ks-textarea {width: 100%;}

ks-input-group > *,
.ks-input > input,
.ks-input-arrow input,
.ks-select,
.ks-date,
ks-area,
.ks-input-color {height: @inputHeight; line-height: (@inputHeight - 2);}

ks-form[size='small'] {
	ks-input-group > *,
	.ks-input,
	.ks-input > input,
	.ks-input-arrow input,
	.ks-select,
	.ks-date,
	ks-area,
	ks-btn,
	.ks-input-color { height: 28px; line-height: 26px;}
}

//日期输入框 单行内 输入框 底色 宽度 边框 圆角 内边距

.ks-date {align-items: center; padding: 0 40px 0 10px; width:190px; overflow: hidden; position: relative}
.ks-date:after { content: '\e64a'; color: #aaa; position: absolute; right: 0; width: 40px; text-align: center; top: 0	}
.ks-date input { border: none; border-radius: 0; background: none; width: 100%; height: @inputHeight; padding:0; display: block}

//下拉选择框
.ks-select {
	display: inline-block; user-select: none;
	
	
	select { display: none}
	select:disabled ~ .ks-select-title { cursor: not-allowed; opacity: .7}
	.ks-select-title {
		display: block; position: relative; padding:0 25px 0 10px; height: 100%; overflow: hidden; background:none;  cursor: pointer; min-width: 80px;
		&:before {font-family:@iconfont; content: '\ea4e'; transition:all 0.2s ease-in-out; font-size: 14px; position: absolute; right:0; top:0; width: 20px; text-align: center;}
		//第一个span后面的span 添加分割斜杠
		> span:first-child ~ span:before { content:'/'; margin: 0 3px; color: @textColor;}
	}
	.ks-select-title[active]:before {transform:rotate(180deg); color:#333;}
}

select:disabled ~ .ks-list-select { cursor: not-allowed; opacity: .7}

//普通输入框
.ks-input {
	vertical-align:middle; white-space: nowrap;
	input {height: inherit; padding: 0 10px; float: left; width: 100%; box-shadow: none; outline: none;-webkit-appearance: none;}
	//清除text文本输入框的清除图标
	> input::-ms-clear{display: none;}
	//清除password密码输入框的明文图标
	> input::-ms-reveal{display: none;}
	
	> left[icon], > right[icon] { width: 32px; text-align: center; position: absolute; top: 1px; bottom:  1px; line-height:2; z-index: 10; color: @textColor}
	> left[icon] { left: 1px}
	> left[icon] ~ input { padding-left: 32px;}
	> right[icon] { right: 1px}
	> right[icon] ~ input { padding-right: 32px;}
	//输入框清理图标
	> right.ks-input-clear {
		display: none; cursor: pointer; font-size: 14px; width: 14px; height: 14px; text-align: center; line-height: 14px; margin-top: -7px; top: 50%; right: 5px;
		&:before {display: inline-block; }
		&[active] { display: block}
	}
}

input.ks-input, textarea.ks-input { padding: 0 10px;}
.ks-input:not(input):not(textarea) { padding: 0; position: relative; display: inline-block}

//颜色选择表单
.ks-input-color {
	width: 70px; display: inline-block;
	> input { width: 100%; height: 100%; border: none; padding: 0}
}

//递增输入框
.ks-input-arrow {
	position: relative; display: inline-block;
	&:after { content: ''; width: 100%; height: 0; overflow: hidden; display: block}
	> [data-digit] { position: absolute; right: 1px; width: 22px; height:50%; line-height: 1.5; top: 1px; text-align: center; border-left: @borderColor 1px solid; cursor: pointer; display: none; z-index: 10; user-select: none; font-size: 12px}
	> [data-digit]:hover { color: @primary}
	> [data-digit='down'] { bottom: 1px; top: auto; border-top: @borderColor 1px solid;}
	> input { height: inherit; background: #fff; padding: 0 22px 0 10px; float: left; width: 100%}
	&:hover [data-digit] , >input:focus ~ [data-digit] { display: block}
}

//密码输入框
.ks-password [icon=ishide].a { content: '\e66a'}





//多行输入框 textarea
.ks-textarea {position: relative}
.ks-textarea textarea {width:100%; transition: none; padding:10px; line-height:initial; height: 100px; max-width: 100%; resize:vertical;}
.ks-textarea-maxtit { position: absolute; right:1px; bottom: 1px; z-index: 11; color: rgba(0,0,0,.35)}

//下拉联想输入框
.ks-input-smart {}
.ks-input-smart p { padding:0 5px; font-size: 13px; height: 36px; line-height: 36px; overflow: hidden; max-width: 380px; border-bottom: #dedede 1px solid; cursor: pointer}
.ks-input-smart p:hover { color: @blue; background: #f2f2f2}
.ks-input-smart p:last-child { border-bottom: 0}

//============== 单选、复选、开关 ==============
.ks-checkbox, .ks-radio, .ks-switch {cursor:pointer; display: inline-block; font-weight: normal; position: relative; color: @textColor; user-select: none; vertical-align: middle;}
.ks-checkbox input, .ks-radio input, .ks-switch input{display:none; }
.ks-checkbox *, .ks-radio *, .ks-switch * { font-style: normal; box-sizing: border-box}


//动画效果
.ks-checkbox > i, .ks-checkbox > i:before,
.ks-radio > i, .ks-radio > i:before,
.ks-switch > i, .ks-switch > i:before {transition:all 0.2s ease-in-out;}


//radio样式
.ks-radio {
	height: 20px; line-height: 20px;
	>i:before { content: ''; width: 16px; height: 16px; border:#ddd 1px solid; background: #fff; display: inline-block; border-radius: 50%; box-sizing: border-box; vertical-align: -2px;}
	> input:checked ~ i { color: @primary}
	> input:checked ~ i:before {border: @primary 5px solid;}
}

.ks-checkbox > i > em, .ks-radio > i > em { margin: 0 10px 0 6px;}

//checkbox样式
.ks-checkbox {
	height: 20px; line-height: 20px;
	> i {font-style: normal; display: inline-block; position: relative; overflow: hidden;}
	> i:before {color:#ccc; text-align:center; font-family:@iconfont; vertical-align:0; font-size: 12px; width:18px; height:18px; line-height:16px; border-radius:2px; content:'\eb7b'; display: inline-block; border: #ddd 1px solid; box-sizing: border-box; background: #fff}
	> input:checked ~ i:before {  background: @primary; color:#fff; border-color:@primary;}
}

.ks-checkbox-indeter > i:before { content: '\f1af'; color: @primary}
//开关样式
.ks-switch {
	> i { position: relative; padding: 0 15px 0 26px; border-radius:100px; height: 24px; line-height: 24px; background: rgba(0,0,0,.3); color: #fff; display: inline-block}
	> i:before {content:''; display: inline-block; width: 18px; height: 18px; background: #fff; border-radius:20px; position: absolute; top: 3px; left: 3px;transition:all 0.2s ease-in-out;}
	> input:active ~ i:before {width: 26px;}
	> input:checked:active ~ i:before { margin-left: -30px;}
	
	> input:checked ~ i { background: @primary; padding: 0 26px 0 15px;}
	> input:checked ~ i:before {left: 100%; margin-left: -22px; background: #fff;}
	> i em:nth-of-type(2) { display: none}
	> input:checked ~ i em:nth-of-type(2) { display: inline-block} //2组文本 开 显示第二个
	> input:checked ~ i em:nth-of-type(1):not(:only-of-type) { display: none} //2组文本 开 隐藏第一个 排除唯一
	//无文字开关
	> i:empty { height: 16px; line-height: 16px; display: block}
	> i:empty:before {top:-2px; left:-2px; border: #d2d2d2 1px solid;}
	> input:checked ~ i:empty:before { margin-left: -18px}
	> input:checked:active ~ i:empty:before { margin-left: -26px;}
	
	.loop(@i) when (@i =< @ColorListLength) {
		@Cname : extract(@ColorList, @i);
		@Cval : extract(@ColorListValue, @i);
		&[color='@{Cname}'] > input[type=checkbox]:checked ~ i { background: @Cval;}
		.loop(@i+1);
	}
	.loop(1);
}


//============== 表单焦点状态 ==============
html[device=pc] {
	//hover 经过
	.ks-input input:not(:disabled):hover,
	.ks-input textarea:not(:disabled):hover,
	input.ks-input:not(:disabled):hover,
	.ks-textarea textarea:not(:disabled):hover,
	ks-input-group > input:not(:disabled):hover,
	ks-input-group > textarea:not(:disabled):hover,
	.ks-select:hover,
	ks-area:not([disabled]):hover { border-color: #a2cfff; border-width: 1px !important; }
	
	//focus 获得焦点
	.ks-input input:not(:disabled):focus,
	.ks-input textarea:not(:disabled):focus,
	input.ks-input:not(:disabled):focus,
	.ks-textarea textarea:not(:disabled):focus,
	ks-input-group > input:focus,
	ks-input-group > textarea:focus,
	.ks-select[active],
	ks-area:not([disabled])[active] { border-color: @primary; color: #495057 !important; box-shadow: 0 0 0 2px rgba(45,140,240,.2); position: relative; z-index: 9}
}



//被禁用 disabled
.ks-input[disabled] > input,
.ks-input > input:disabled,
ks-input-group input:disabled,
ks-area[disabled] {
	cursor: not-allowed; background-color: #f0f0f0; opacity: .75;
}
//禁用状态
.ks-checkbox > input[disabled] ~ i,
.ks-radio > input[disabled] ~ i,
.ks-switch > input[disabled] ~ i { cursor: not-allowed; opacity: 0.75;}


//图片上传组件
ks-pic {
	display:inline-block; width: 100px; height: 100px; border-radius: 5px; overflow: hidden; background: #f2f2f2; position: relative; margin: 0 10px 10px 0;
	> label {
		display: block; position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 10; cursor: pointer; text-align: center; font-size: 56px; color: #9e9e9e;
		&[icon]:before { position: absolute; left: 50%; top: 50%; margin: -23px 0 0 -23px; font-size: 46px}
		> input[type=file] { display: none;}
	}
	ks-pic-thumb {
		height: 100%;
		img { width: 100%;}
		> *[icon*=delete] {display: none; position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0,0,0, .9); color: #fff; text-align: center; cursor: pointer; padding: 4px 0}
		&:hover > *[icon*=delete] { display: block}
		& ~ label {display: none; background: rgba(0,0,0, .3); color: rgba(255,255,255, .6);}
	}
	&:hover ks-pic-thumb ~ label { display: block}
}
//============== 图片 ==============
.ks-img { text-align: center; overflow: hidden; border-radius: 5px; background: #f2f2f2;  width: 140px; height: 140px; display: inline-block}
.ks-img img { max-width: 100%;}
	//============== H5标题栏 ==============
.ks-hdbar { height: 45px; line-height: 45px; font-size: 16px; background: #fff; position: relative}
.ks-hdbar > [icon='back']:first-child { width: 30px; height: 100%; text-align: center; position: absolute; left: 0; top: 0;}
.ks-hdbar .ks-hdbar-title { text-align: center; font-size: 16px;}

//============== 行 & 列 & 布局 ==============
//最大高度
.ks-max-h { height: 100%;}
//最大宽度
.ks-max-w { width: 100%;}






//相对定位
.ks-pos { position: relative;}
/*绝对定位，将会按照1234对应四个角定位
    1 2
    3 4
*/
.ks-pos-1, .ks-pos-2, .ks-pos-3, .ks-pos-4 { position: absolute; z-index: 9;}
.ks-pos-1 {left: 0; top:0;}			.ks-pos-2 { right: 0; top: 0;}
.ks-pos-3 { left: 0; bottom: 0;}	.ks-pos-4 { right: 0; bottom: 0;}



//============== 圆角 ==============
.ks-o, .ks-o-sub > * { border-radius: 100%; overflow: hidden}
.ks-o-1, .ks-o-1-sub > * { border-radius: 3px}
.ks-o-2, .ks-o-2-sub > * { border-radius: 5px}
.ks-o-3, .ks-o-3-sub > * { border-radius: 10px}
.ks-o-4, .ks-o-4-sub > * { border-radius: 15px}
.ks-o-5, .ks-o-5-sub > * { border-radius: 20px}
.ks-o-6, .ks-o-6-sub > * { border-radius: 25px}
.ks-o-7, .ks-o-7-sub > * { border-radius: 30px}

//============== 常用属性 ==============

//必须属性 占用before给一个红星
*[data-required]:before, [required]:before { content: '*'; color:@red; margin-right: 5px; font-family: SimSun; font-size: 14px;}
//带下划线的链接
.ks-link, .ks-link-line { cursor: pointer}
.ks-link-line, .ks-link-line:hover {text-decoration: underline;}
//清除浮动
.ks-clear:after,
.ks-fl-sub::after,
.ks-fr-sub::after,
.ks-slide-c::after { content: ''; width: 100%; clear: both; display: block; overflow: hidden}

//左浮动
.ks-fl {float: left}
.ks-fl-sub > * { float: left}
//右浮动
.ks-fr {float: right}
.ks-fr-sub > * { float: right}

//文字方向
.ks-tl { text-align: left}
.ks-tc { text-align: center}
.ks-tr { text-align: right}

//非块级元素垂直居中
.ks-middle, .ks-middle-sub > * { vertical-align: middle; display: inline-block;}
//小圆点
ks-dot {
	width: 6px; height: 6px; line-height: 1.5; display: inline-block; vertical-align: super; border-radius: 2em;
	
	//消息处理 属性值第一位包含数字1-9
	&:not(:empty) {width:auto; height:auto; padding:0 6px; font-size: 12px; font-weight: normal; color: #fff; margin: 0 0 0 -8px;
	}
	
	.loop(@i) when (@i =< @ColorListLength) {
		@Cname : extract(@ColorList, @i);
		@Cval : extract(@ColorListValue, @i);
		&[color='@{Cname}'] { background: @Cval;}
		.loop(@i+1);
	}
	.loop(1);
}

//加粗
.ks-fw0 { font-weight: normal}
.ks-fw1 { font-weight: 500}
.ks-fw2 { font-weight: bold}

//字号
.ks-f0 { font-size: 10px;}
.ks-f1 { font-size: 12px;}
.ks-f2 { font-size: 14px;}
.ks-f3 { font-size: 16px;}
.ks-f4 { font-size: 20px;}
.ks-f5 { font-size: 22px;}
.ks-f6 { font-size: 24px;}
.ks-f7 { font-size: 26px;}
.ks-f8 { font-size: 28px;}
.ks-f9 { font-size: 30px;}
.ks-f10 { font-size: 32px;}
.ks-f11 { font-size: 34px;}
.ks-f12 { font-size: 36px;}
.ks-f13 { font-size: 38px;}
.ks-f14 { font-size: 40px;}
.ks-f15 { font-size: 42px;}
.ks-f16 { font-size: 44px;}
.ks-f17 { font-size: 50px;}




//============== 内边距 -sub后缀表示所有直接子级 ==============
.ks-p { padding: 15px;}	.ks-p-sub > * {padding: 15px;}
.ks-p0 { padding:0 !important;}	.ks-p0-sub > * {padding: 0 !important;}
.ks-p1 { padding: 5px;}	.ks-p1-sub > * {padding: 5px;}
.ks-p2 { padding: 10px;}	.ks-p2-sub > * {padding: 10px;}
.ks-p3 { padding: 15px;}	.ks-p3-sub > * {padding: 15px;}
.ks-p4 { padding: 20px;}	.ks-p4-sub > * {padding: 20px;}
.ks-p5 { padding: 25px;}	.ks-p5-sub > * {padding: 25px;}

//上
.ks-pt { padding-top: 15px;}	.ks-pt-sub > *:not(:first-child) { padding-top: 15px;}
.ks-pt0 { padding-top:0 !important;}
.ks-pt1 { padding-top: 5px;}	.ks-pt5-sub > *:not(:first-child) { padding-top: 5px;}
.ks-pt2 { padding-top: 10px;}	.ks-pt5-sub > *:not(:first-child) { padding-top: 10px;}
.ks-pt3 { padding-top: 15px;}	.ks-pt5-sub > *:not(:first-child) { padding-top: 15px;}
.ks-pt4 { padding-top: 20px;}	.ks-pt5-sub > *:not(:first-child) { padding-top: 20px;}
.ks-pt5 { padding-top: 25px;}	.ks-pt5-sub > *:not(:first-child) { padding-top: 25px;}
//右
.ks-pr { padding-right: 15px;}	.ks-pr-sub > *:not(:last-child) { padding-right: 15px;}
.ks-pr0 { padding-right:0 !important;}
.ks-pr1 { padding-right: 5px;}	.ks-pr1-sub > *:not(:last-child) { padding-right: 5px;}
.ks-pr2 { padding-right: 10px;}	.ks-pr2-sub > *:not(:last-child) { padding-right: 10px;}
.ks-pr3 { padding-right: 15px;}	.ks-pr3-sub > *:not(:last-child) { padding-right: 15px;}
.ks-pr4 { padding-right: 20px;}	.ks-pr4-sub > *:not(:last-child) { padding-right: 20px;}
.ks-pr5 { padding-right: 25px;}	.ks-pr5-sub > *:not(:last-child) { padding-right: 25px;}
//下
.ks-pb { padding-bottom: 15px;}	.ks-pb-sub > *:not(:last-child) { padding-bottom: 15px;}
.ks-pb0 { padding-bottom:0 !important;}
.ks-pb1 { padding-bottom: 5px;}	.ks-pb1-sub > *:not(:last-child) { padding-bottom: 5px;}
.ks-pb2 { padding-bottom: 10px;}	.ks-pb2-sub > *:not(:last-child) { padding-bottom: 10px;}
.ks-pb3 { padding-bottom: 15px;}	.ks-pb3-sub > *:not(:last-child) { padding-bottom: 15px;}
.ks-pb4 { padding-bottom: 20px;}	.ks-pb4-sub > *:not(:last-child) { padding-bottom: 20px;}
.ks-pb5 { padding-bottom: 25px;}	.ks-pb5-sub > *:not(:last-child) { padding-bottom: 25px;}
//左
.ks-pl { padding-left: 15px;}	.ks-pl-sub > *:not(:first-child) { padding-left: 15px;}
.ks-pl0 { padding-left:0 !important;}
.ks-pl1 { padding-left: 5px;}		.ks-pl5-sub > *:not(:first-child) { padding-left: 5px;}
.ks-pl2 { padding-left: 10px;}	.ks-pl5-sub > *:not(:first-child) { padding-left: 10px;}
.ks-pl3 { padding-left: 15px;}	.ks-pl5-sub > *:not(:first-child) { padding-left: 15px;}
.ks-pl4 { padding-left: 20px;}	.ks-pl5-sub > *:not(:first-child) { padding-left: 20px;}
.ks-pl5 { padding-left: 25px;}	.ks-pl5-sub > *:not(:first-child) { padding-left: 25px;}

//上下
.ks-ptb { padding-top: 15px; padding-bottom: 15px;}		.ks-ptb-sub > * { padding-top: 15px; padding-bottom: 15px;}
.ks-ptb0 { padding-top: 0 !important; padding-bottom:0 !important;}	.ks-ptb0-sub > * { padding-top: 0 !important; padding-bottom: 0 !important;}
.ks-ptb1 { padding-top: 5px; padding-bottom: 5px;}		.ks-ptb1-sub > * { padding-top: 5px; padding-bottom: 5px;}
.ks-ptb2 { padding-top: 10px; padding-bottom: 10px;}	.ks-ptb2-sub > * { padding-top: 10px; padding-bottom: 10px;}
.ks-ptb3 { padding-top: 15px; padding-bottom: 15px;}	.ks-ptb3-sub > * { padding-top: 15px; padding-bottom: 15px;}
.ks-ptb4 { padding-top: 20px; padding-bottom: 20px;}	.ks-ptb4-sub > * { padding-top: 20px; padding-bottom: 20px;}
.ks-ptb5 { padding-top: 25px; padding-bottom: 25px;}	.ks-ptb5-sub > * { padding-top: 25px; padding-bottom: 25px;}

//左右
.ks-plr { padding-left: 15px; padding-right: 15px;}		.ks-plr-sub > * { padding-left: 15px; padding-right: 15px;}
.ks-plr0 { padding-left: 0 !important; padding-right:0 !important;}	.ks-plr0-sub > * { padding-left: 0 !important;; padding-right: 0 !important;}
.ks-plr1 { padding-left: 5px; padding-right: 5px;}		.ks-plr1-sub > * { padding-left: 5px; padding-right: 5px;}
.ks-plr2 { padding-left: 10px; padding-right: 10px;}	.ks-plr2-sub > * { padding-left: 10px; padding-right: 10px;}
.ks-plr3 { padding-left: 15px; padding-right: 15px;}	.ks-plr3-sub > * { padding-left: 15px; padding-right: 15px;}
.ks-plr4 { padding-left: 20px; padding-right: 20px;}	.ks-plr4-sub > * { padding-left: 20px; padding-right: 20px;}
.ks-plr5 { padding-left: 25px; padding-right: 25px;}	.ks-plr5-sub > * { padding-left: 25px; padding-right: 25px;}

//============== 外边距 -sub后缀表示所有直接子级（上左第一个无边距 右下最后一个没边距） ==============
.ks-m { margin: 15px;}	.ks-m-sub > * {margin: 15px;}
.ks-m0 { margin:0 !important;}	.ks-m0-sub > * {margin: 0 !important;}
.ks-m1 { margin: 5px;}	.ks-m1-sub > * {margin: 5px;}
.ks-m2 { margin: 10px;}	.ks-m2-sub > * {margin: 10px;}
.ks-m3 { margin: 15px;}	.ks-m3-sub > * {margin: 15px;}
.ks-m4 { margin: 20px;}	.ks-m4-sub > * {margin: 20px;}
.ks-m5 { margin: 25px;}	.ks-m5-sub > * {margin: 25px;}
//上
.ks-mt { margin-top: 15px;}	.ks-mt-sub > *:not(:first-child) { margin-top: 15px;}
.ks-mt0 { margin-top:0 !important;}
.ks-mt1 { margin-top: 5px;}	.ks-mt5-sub > *:not(:first-child) { margin-top: 5px;}
.ks-mt2 { margin-top: 10px;}	.ks-mt5-sub > *:not(:first-child) { margin-top: 10px;}
.ks-mt3 { margin-top: 15px;}	.ks-mt5-sub > *:not(:first-child) { margin-top: 15px;}
.ks-mt4 { margin-top: 20px;}	.ks-mt5-sub > *:not(:first-child) { margin-top: 20px;}
.ks-mt5 { margin-top: 25px;}	.ks-mt5-sub > *:not(:first-child) { margin-top: 25px;}
//右
.ks-mr { margin-right: 15px;}	.ks-mr-sub > *:not(:last-child) { margin-right: 15px;}
.ks-mr0 { margin-right:0 !important;}
.ks-mr1 { margin-right: 5px;}	.ks-mr1-sub > *:not(:last-child) { margin-right: 5px;}
.ks-mr2 { margin-right: 10px;}	.ks-mr2-sub > *:not(:last-child) { margin-right: 10px;}
.ks-mr3 { margin-right: 15px;}	.ks-mr3-sub > *:not(:last-child) { margin-right: 15px;}
.ks-mr4 { margin-right: 20px;}	.ks-mr4-sub > *:not(:last-child) { margin-right: 20px;}
.ks-mr5 { margin-right: 25px;}	.ks-mr5-sub > *:not(:last-child) { margin-right: 25px;}
//下
.ks-mb { margin-bottom: 15px;}	.ks-mb-sub > *:not(:last-child) { margin-bottom: 15px;}
.ks-mb0 { margin-bottom:0 !important;}
.ks-mb1 { margin-bottom: 5px;}	.ks-mb1-sub > *:not(:last-child) { margin-bottom: 5px;}
.ks-mb2 { margin-bottom: 10px;}	.ks-mb2-sub > *:not(:last-child) { margin-bottom: 10px;}
.ks-mb3 { margin-bottom: 15px;}	.ks-mb3-sub > *:not(:last-child) { margin-bottom: 15px;}
.ks-mb4 { margin-bottom: 20px;}	.ks-mb4-sub > *:not(:last-child) { margin-bottom: 20px;}
.ks-mb5 { margin-bottom: 25px;}	.ks-mb5-sub > *:not(:last-child) { margin-bottom: 25px;}
//左
.ks-ml { margin-left: 15px;}	.ks-ml-sub > *:not(:last-child) { margin-left: 15px;}
.ks-ml0 { margin-left:0 !important;}
.ks-ml1 { margin-left: 5px;}		.ks-ml5-sub > *:not(:last-child) { margin-left: 5px;}
.ks-ml2 { margin-left: 10px;}	.ks-ml5-sub > *:not(:last-child) { margin-left: 10px;}
.ks-ml3 { margin-left: 15px;}	.ks-ml5-sub > *:not(:last-child) { margin-left: 15px;}
.ks-ml4 { margin-left: 20px;}	.ks-ml5-sub > *:not(:last-child) { margin-left: 20px;}
.ks-ml5 { margin-left: 25px;}	.ks-ml5-sub > *:not(:last-child) { margin-left: 25px;}

//上下
.ks-mtb { margin-top: 15px; margin-bottom: 15px;}		.ks-mtb-sub > * { margin-top: 15px; margin-bottom: 15px;}
.ks-mtb0 { margin-top: 0 !important; margin-bottom:0 !important;}	.ks-mtb0-sub > * { margin-top: 0 !important; margin-bottom: 0 !important;}
.ks-mtb1 { margin-top: 5px; margin-bottom: 5px;}		.ks-mtb1-sub > * { margin-top: 5px; margin-bottom: 5px;}
.ks-mtb2 { margin-top: 10px; margin-bottom: 10px;}	.ks-mtb2-sub > * { margin-top: 10px; margin-bottom: 10px;}
.ks-mtb3 { margin-top: 15px; margin-bottom: 15px;}	.ks-mtb3-sub > * { margin-top: 15px; margin-bottom: 15px;}
.ks-mtb4 { margin-top: 20px; margin-bottom: 20px;}	.ks-mtb4-sub > * { margin-top: 20px; margin-bottom: 20px;}
.ks-mtb5 { margin-top: 25px; margin-bottom: 25px;}	.ks-mtb5-sub > * { margin-top: 25px; margin-bottom: 25px;}

//左右
.ks-mlr { margin-left: 15px; margin-right: 15px;}		.ks-mlr-sub > * { margin-left: 15px; margin-right: 15px;}
.ks-mlr0 { margin-left: 0 !important; margin-right:0 !important;}	.ks-mlr0-sub > * { margin-left: 0 !important;; margin-right: 0 !important;}
.ks-mlr1 { margin-left: 5px; margin-right: 5px;}		.ks-mlr1-sub > * { margin-left: 5px; margin-right: 5px;}
.ks-mlr2 { margin-left: 10px; margin-right: 10px;}	.ks-mlr2-sub > * { margin-left: 10px; margin-right: 10px;}
.ks-mlr3 { margin-left: 15px; margin-right: 15px;}	.ks-mlr3-sub > * { margin-left: 15px; margin-right: 15px;}
.ks-mlr4 { margin-left: 20px; margin-right: 20px;}	.ks-mlr4-sub > * { margin-left: 20px; margin-right: 20px;}
.ks-mlr5 { margin-left: 25px; margin-right: 25px;}	.ks-mlr5-sub > * { margin-left: 25px; margin-right: 25px;}




//============== 文字、背景颜色 ==============

.loop(@i) when (@i =< @ColorListLength) {
	@Cname : extract(@ColorList, @i);
	@Cval : extract(@ColorListValue, @i);
	.ks-bg-@{Cname} { background-color:@Cval;}
	.ks-text-@{Cname} {color:@Cval;}
	.ks-tag-@{Cname} { color:@Cval; border-color:@Cval;}
	.loop(@i+1);
}
.loop(1);

//============== 边框 ==============

.ks-bd { border: @borderColor 1px solid;}
.ks-bd0 {border: 0 !important;}
.ks-bd-t { border-top: @borderColor 1px solid;}
.ks-bd-r { border-right: @borderColor 1px solid;}
.ks-bd-b { border-bottom: @borderColor 1px solid;}
.ks-bd-l { border-left: @borderColor 1px solid;}


//============== 分割线 ==============
ks-hr { background: @borderColor; width: 100%; height: 1px; display: block;}

//============== 分割线 ==============
ks-line { position: relative; display: block; text-align: center}
ks-line[label]:before { content: ''; height: 1px; background: #ddd; position: absolute; left: 0; right: 0; top: 50%; z-index: 1}
ks-line[label]:after { content: attr(label); padding: 0 0.7em; background: #fff; position: relative; z-index: 2;}

//============== 动画 ==============
@keyframes spin {
	0% {transform:rotate(0deg);}
	100% {transform:rotate(360deg);}
}

@keyframes ks-anim-up {
	0% {transform: translate3d(0, 50%, 0); opacity: 0;}
	100% { transform: translate3d(0, 0, 0); opacity: 1;}
}
@keyframes ks-anim-up-out {
	0% {transform: translate3d(0, 0, 0); opacity: 1;}
	100% { transform: translate3d(0, 15%, 0); opacity: 0;}
}
@keyframes ks-anim-down {
	0% {transform: translate3d(0, -50%, 0); opacity: 0;}
	100% { transform: translate3d(0, 0, 0); opacity: 1;}
}
@keyframes ks-anim-down-out {
	0% {transform: translate3d(0, 0, 0); opacity: 1;}
	100% { transform: translate3d(0, -15%, 0); opacity: 0;}
}
@keyframes ks-anim-left {
	0% {transform: translate3d(50%, 0, 0); opacity: 0;}
	100% { transform: translate3d(0, 0, 0); opacity: 1;}
}
@keyframes ks-anim-left-out {
	0% {transform: translate3d(0, 0, 0); opacity: 1;}
	100% { transform: translate3d(100%, 0, 0); opacity: 0;}
}
@keyframes ks-anim-right {
	0% {transform: translate3d(-50%, 0, 0); opacity: 0;}
	100% { transform: translate3d(0, 0, 0); opacity: 1;}
}
@keyframes ks-anim-right-out {
	0% {transform: translate3d(0, 0, 0); opacity: 1;}
	100% { transform: translate3d(-100%, 0, 0); opacity: 0;}
}
@keyframes ks-anim-scale {
	0% {transform: scale(.3); opacity: 0;}
	100% { transform: scale(1); opacity: 1;}
}
@keyframes ks-anim-scale-out {
	0% {transform: scale(1); opacity: 1;}
	100% { transform: scale(0); opacity: 0;}
}

@keyframes ks-anim-fadein {
	0% {opacity: 0;}
	100% {opacity: 1;}
}

@keyframes ks-anim-fadeout {
	0% {opacity: 1;}
	100% {opacity: 0;}
}

.ks-layer, .ks-layer-cover, *[class*='ks-anim-'] {
	-webkit-animation-duration: .2s;
	animation-duration: .2s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both
}
.ks-anim-unfold {animation-name:ks-anim-unfold;}
.ks-anim-up {animation-name:ks-anim-up;}
.ks-anim-down {animation-name:ks-anim-down;}
.ks-anim-left {animation-name:ks-anim-left;}
.ks-anim-right {animation-name:ks-anim-right;}
.ks-anim-scale {animation-name:ks-anim-scale;}
.ks-anim-fadein {animation-name:ks-anim-fadein;}
.ks-anim-fadeout {animation-name:ks-anim-fadeout;}


.ks-anim-hide {opacity: 0; }
.ks-anim-hide.ks-anim-unfold {animation-name:ks-anim-unfold-out;}
.ks-anim-hide.ks-anim-up {animation-name:ks-anim-up-out;}
.ks-anim-hide.ks-anim-down {animation-name:ks-anim-down-out;}
.ks-anim-hide.ks-anim-left {animation-name:ks-anim-left-out;}
.ks-anim-hide.ks-anim-right {animation-name:ks-anim-right-out;}
.ks-anim-hide.ks-anim-scale {animation-name:ks-anim-scale-out;}

//============== 输入框组 ==============
.ks-loading { text-align: center; display: block; padding: 0.6em 1em; color: #9a9a9a; }
.ks-loading::before { content: '\eec4'; font-family: @iconfont; font-size: 2em; text-align: center;  vertical-align: middle; display: inline-block;  animation: spin 1s  linear infinite;}
.ks-loading::after {content: 'Loading...'}
//============== 输入框组 ==============
ks-input-group {
	display: inline-table; width:100%; border-collapse:separate; vertical-align:middle;
	> * { width: 1px; display: table-cell !important; vertical-align:middle; font-style: normal;  white-space:nowrap; transition:all 0.2s ease-in-out;}
	> *:not([class*='ks-']) {padding: 0 10px;}
	> input,
	> .ks-input {width: 100%; float: left;}
	.ks-select { min-width: 100px;}
}
//PC专用样式
html[device=pc]{
	ks-input-group {
		background: #f2f2f2;
		//默认所有去圆角
		> *, > ks-btn, input, > .ks-input, > .ks-input input {border-radius: 0;}
		> .ks-input:not(input):not(ks-btn) { border: 0}
		
		//非hover focus的所有子元素默认边线
		> *:not(input):not(ks-btn) { border: @borderColor 1px solid; border-left-width: 0; border-right-width: 0}
		
		> *:first-child,
		> *:first-child > input {border-left-width:1px; border-radius: 3px 0 0 3px;}
		> *:last-child,
		> *:last-child > input {border-right-width:1px; border-radius: 0 3px 3px 0;}
		
		> *:first-child:not(:hover):not(:focus):not(.a):not([active]):not(input) { border-right-color: transparent}
		> *:last-child:not(:hover):not(:focus):not(.a):not([active]):not(input) { border-left-color: transparent}
	}
}


//============== 表单小尺寸 ==============
ks-input-group[size=small],
ks-input-group[size=small] > *,
.ks-input[size=small],
.ks-input[size=small] > input,
.ks-select[size=small],
.ks-date[size=small],
ks-area[size=small] {height: (@inputHeight - 6); line-height: (@inputHeight - 8);}

.ks-input-arrow[size=small] > input { padding-left: 6px; padding-right: 16px}
.ks-input-arrow[size=small] > [data-digit] { width: 16px; line-height: 1}


ks-input-group[size=mini],
ks-input-group[size=mini] > *,
.ks-input[size=mini],
.ks-input[size=mini] > input,
.ks-select[size=mini],
.ks-date[size=mini],
ks-area[size=mini] {height: (@inputHeight - 12); line-height: (@inputHeight - 14); font-size: 12px;}

.ks-input-arrow[size=mini] > input { padding-left: 6px; padding-right: 16px}
.ks-input-arrow[size=mini] > [data-digit] { width: 16px; line-height: 1}


//手机浏览器中日期组件禁止输入(禁止手机弹出输入法)
html[device=mobile] .ks-input[type='date'] { position: relative;}
html[device=mobile] .ks-input[type='date'] > i.ks-input-cover { position: absolute; left: 0; top: 0; bottom: 0; right: 0; background: #fff; opacity: 0;  z-index: 10;}




//============== 地区选择 ==============
//按钮
ks-area {
	cursor: pointer; padding:0 10px;
	span { float: left; padding: 0 3px; white-space: nowrap;}
	span:last-child { border-right: 0}
	&[maxlevel='1'] span { max-width: 100%;}
	&[maxlevel='2'] span { max-width: 50%;}
	&[maxlevel='3'] span { max-width: 33.33333%;}
	&[maxlevel='4'] span { max-width: 25%;}
}






//============== 菜单 ==============
.ks-menu > * { padding: 10px; display: block;}
.ks-menu > .ks-label { margin-bottom: 0}



//============== 附加效果 ==============
//去掉动画
.ks-no-transition {transition:none !important;}
//默认动画 线性3ms
.ks-transition {transition:all 0.2s ease-in-out;}

//============== 附加样式 ==============
.ks-click {cursor: pointer}
//文字
.ks-text-top {vertical-align: text-top}
.ks-text-center {vertical-align: middle}
.ks-text-bottom {vertical-align: text-bottom}


.ks-editor {border: #ddd 1px solid; background: #fff; border-radius: 3px;}
.ks-editor-content .ql-editor{ min-height: 280px; max-height: 420px;}
.ks-editor .ql-toolbar.ql-snow { border: none; border-bottom: #ddd 1px solid;}
.ql-toolbar.ql-snow .ql-formats { border-right: #f2f2f2 1px solid; padding-right:5px; margin-right: 5px;}
.ql-toolbar.ql-snow .ql-formats:last-of-type { border-right: 0; padding-right: 0; margin-right: 0}
.ks-editor .ql-container.ql-snow { border: none}



.ksaicon { display: inline-block; vertical-align: middle; width: 1em; height: 1em; font-size: 40px; border-radius: 50%; background: radial-gradient(ellipse at center, #a902bd 1%, #3d0244 100%); position: relative}
.ksaicon-amt {position: relative; width:100%; height:100%; border-radius: 50%; animation: spin 10s linear infinite; z-index: 2;}
.ksaicon-amt > div { position: absolute; border-radius: 100%; width: 100%; height: 100%;}
.ksaicon-amt div:nth-of-type(1) { border-left: 0.1047em solid #26bd00; border-top: 0.238em solid transparent;}
.ksaicon-amt div:nth-of-type(2) {border-top: 0.1047em solid #fcff25; border-right: 0.238em solid transparent;}
.ksaicon-amt div:nth-of-type(3) {border-right: 0.1047em solid #ff9425; border-bottom: 0.238em solid transparent;}
.ksaicon-amt div:nth-of-type(4) {border-bottom: 0.1047em solid #f51e1e; border-left: 0.238em solid transparent;}

.ksaicon-ks { position: absolute; left: 50%; top: 50%; margin: -0.2142em 0 0 -0.2em; z-index: 3; width: 0.4285em; height: 0.4285em; transform: skew(-15deg);}
.ksaicon-ks > div { position: absolute;  background:#fff;}
.ksaicon-ks > div:nth-of-type(1) { width: 0.0952em; height:0.4285em;}
.ksaicon-ks > div:nth-of-type(2) { width: 0.0952em; height:0.2857em; transform: skew(-45deg); left:0.1428em;}
.ksaicon-ks > div:nth-of-type(3) { width: 0.0952em; height:0.238em; transform: skew(45deg); top: 0.1857em; left:0.2142em;}